﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        /* 可以添加一些自定义样式 */
        .page-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        body {
            background-color: #FFFFCC;
        }

        .caozuo {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>您正在做的业务是：人力资源--权限管理--添加角色</div>
        <div calss="caozuo">
            <button v-on:click="Add">保存</button> &nbsp;&nbsp;
            <button v-on:click="Fan">返回</button>
        </div>
        <table>
            <tr>
                <td>角色名称：</td>
                <td width="400px"><el-input v-model="name" ></el-input></td>
                <td>角色说明：</td>
                <td width="400px"><el-input v-model="sm"></el-input></td>
            </tr>
            <tr>
                <td>角色是否可用：</td>
                <td>
                    <el-select v-model="value"
                               placeholder="请选择"
                               size="large"
                               style="width: 150px">
                        <el-option v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value" />
                    </el-select>
                </td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
          setup() {

              const name = ref('')//角色名称
              const sm = ref('')//角色描述
              const value = ref('true');//角色是否可用
                const options = [
                    {
                        value: "true",
                        label: "是"
                    },
                    {
                        value: "false",
                        label: "否"
                    }
                ];

              function Fan(){
                  window.location.href = `/Role_Permissions/Index`
              }

              function Add(){
                axios.get("/Role_Permissions/AddR",{
                  params: {
                      name:name.value,
                      sm:sm.value,
                      zt:value.value
                  }
                })
                .then(res=>{
                  ElementPlus.ElMessage.success('添加成功');
                  setTimeout(() => {
                      Fan();
                    }, 1000);
                })
                .catch(err=>{
                  ElementPlus.ElMessage.error('添加失败，请重试');
                  console.log("添加失败:"+err);
                })
              }

              return {
                  Fan,
                  Add,
                  value,
                  options,
                  name,
                  sm,
              }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
